<template>
  <div class="app-container">
    <div class="app-top">
      <div class="input-line">
        <span class="input-label">订单号：</span>
        <el-input v-model="tableParam.id" placeholder="请输入" style="width:210px" clearable />
      </div>
      <div class="input-line">
        <span class="input-label">商家订单号：</span>
        <el-input v-model="tableParam.orderNo" placeholder="请输入" style="width:210px" clearable />
      </div>
      <div class="input-line">
        <span class="input-label">状态：</span>
        <el-select v-model="tableParam.type" placeholder="请选择" style="width:120px">
          <el-option label="全部" :value="null" />
          <el-option label="未付款" :value="0" />
          <el-option label="已冻结" :value="4" />
          <el-option label="已解冻(未支付)" :value="5" />
          <el-option label="已完成" :value="3" />
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="tableParam.page=1,fetchData()">搜索</el-button>
      </div>
    </div>

    <div class="function" />
    <el-table v-loading="listLoading" :data="list" border :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" tooltip-effect="dark">
      <el-table-column align="center" label="订单号" prop="id" />
      <el-table-column align="center" label="产品" width="160">
        <template slot-scope="scope">
          <el-tooltip effect="dark" placement="bottom">
            <div class="ellipsis2">{{ findgoodName(scope.row.goodsId) }}</div>
            <template #content>
              <div class="tooltip-content">{{ findgoodName(scope.row.goodsId) }}</div>
            </template>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商家订单号" prop="orderNo" width="180" />
      <el-table-column align="center" label="冻结金额(元)" prop="money" />
      <el-table-column align="center" label="扣减金额(元)" prop="amount" />
      <el-table-column align="center" label="收货人" prop="name" />
      <el-table-column align="center" label="收货电话" prop="phone" />
      <el-table-column align="center" label="地址" prop="address" />
      <el-table-column align="center" label="详细地址">
        <template slot-scope="scope">
          <el-tooltip effect="dark" placement="bottom">
            <div class="ellipsis2">{{ scope.row.addressDetails }}</div>
            <template #content>
              <div class="tooltip-content">{{ scope.row.addressDetails }}</div>
            </template>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单创建天数" prop="addressDetails">
        <template slot-scope="scope">
          <div v-if="getDay(scope.row.createTime)>80" style="color:red"> {{ getDay(scope.row.createTime) }}</div>
          <div v-else> {{ getDay(scope.row.createTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="付款状态" align="center" width="140">
        <template slot-scope="scope">
          <el-tag v-show="scope.row.type===4">已冻结</el-tag>
          <el-tag v-show="scope.row.type===3" type="success">已完成</el-tag>
          <el-tag v-show="scope.row.type===0" type="info">未付款</el-tag>
          <el-tag v-show="scope.row.type===2" type="danger">交易关闭</el-tag>
          <el-tag v-show="scope.row.type===5" type="warning">已解冻</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="物流状态" align="center" width="140">
        <template slot-scope="scope">
          <div v-if="scope.row.type===4">
            <el-tag v-show="scope.row.logisticsType===0" type="success">待发货</el-tag>
            <el-tooltip v-show="scope.row.logisticsType===1" effect="dark" placement="bottom">
              <div>
                <el-tag type="info">已发货</el-tag>
              </div>
              <template #content>
                {{ scope.row.logistics }}
              </template>
            </el-tooltip>
            <el-tag v-show="scope.row.logisticsType===2">买家已收货</el-tag>
            <el-tag v-show="scope.row.logisticsType===3" type="danger">买家归还已发货</el-tag>
            <el-tag v-show="scope.row.logisticsType===4" type="warning">已收货</el-tag>
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="160" />
      <el-table-column label="更新时间" align="center" prop="updateTime" width="160" />
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <div class="link">
            <el-link type="primary" @click="open(scope.row)">查看</el-link>
            <el-link v-if="scope.row.type===5" type="success" @click="pay(scope.row.id)">支付</el-link>
            <el-link v-if="scope.row.type===4" type="warning" @click="unFree(scope.row)">解冻</el-link>
            <el-link v-if="scope.row.type===5||scope.row.type==0" type="info" @click="queryFreeze(scope.row)">更新状态</el-link>
            <el-link v-if="getDay(scope.row.createTime)>30&&scope.row.type===2" type="danger" @click="del(scope.row.id)">删除</el-link>
            <el-link v-if="scope.row.type===4&&scope.row.logisticsType===0" type="success" @click="delivery(scope.row)">发货</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="app-pagination">
      <el-pagination :current-page.sync="tableParam.page" :page-sizes="[10, 20, 30, 40]" :page-size="tableParam.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="sizeData" @current-change="fetchData()" />
      <el-button type="primary" size="mini" icon="el-icon-refresh" @click="fetchData()">刷新</el-button>
    </div>
    <!-- 解冻 -->
    <el-dialog :visible.sync="dialog" width="480px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">解冻详情</span>
      <div class="dialog_info">
        <el-form ref="form" :inline="true" :model="row" :rules="rules" label-position="left">
          <div>
            <el-form-item label="订单号" label-width="110px">
              <span style="color:red;">{{ row.id }}</span>
            </el-form-item>
          </div>
          <el-form-item label="商家订单号" label-width="110px">
            <span style="color:red;">{{ row.orderNo }}</span>
          </el-form-item>
          <el-form-item label="扣减/支付金额(元)" prop="name" label-width="140px">
            <el-input-number v-model="row.amount" :precision="2" :step="0.01" :max="row.money" :min="0" style="width:180px" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog=false">取 消</el-button>
        <el-button type="primary" @click="submitFree">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog :visible.sync="dialog1" width="480px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">订单详情</span>
      <div class="dialog_info">
        <el-form ref="form" :inline="true" :model="row" :rules="rules" label-position="left">
          <div>
            <el-form-item label="订单号" label-width="110px">
              <div style="color:red;">{{ row.id }}</div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="产品" label-width="110px">
              <div style="color:red;">{{ findgoodName(row.goodsId) }}</div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="商家订单号" label-width="110px">
              <div style="color:red;">{{ row.orderNo }}</div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="冻结金额(元)" label-width="110px">
              <div style="color:red;">{{ row.money }}</div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="扣减金额(元)" label-width="110px">
              <div style="color:red;">{{ row.amount }}</div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="收货人" label-width="110px">
              <div style="color:red;">{{ row.name }}</div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="收货电话" label-width="110px">
              <div style="color:red;">{{ row.phone }}</div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="地址" label-width="110px">
              <div style="color:red;">{{ row.address }}</div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="详细地址" label-width="110px">
              <div style="color:red;">{{ row.addressDetails }}</div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="订单创建天数" label-width="110px">
              <div style="color:red;">{{ getDay(row.createTime) }}</div>
            </el-form-item>
          </div>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog1=false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 发货 -->
    <el-dialog :visible.sync="dialog2" width="480px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">发货</span>
      <div class="dialog_info">
        <el-form ref="form" :inline="true" :model="form" label-position="left">
          <el-form-item label="物流号">
            <el-input v-model="form.logistics" placeholder="物流号" clearable style="width:320px" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog2=false">取 消</el-button>
        <el-button type="primary" @click="submitLogistics()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryAll, del, createTradePay, createFunfreeze, queryFreeze, setlogistics } from '@/api/order'
import { queryAll as goodsqueryAll } from '@/api/goods'
let goodsList = []
export default {
  data() {
    return {
      list: null,
      listLoading: true,
      tableParam: {
        page: 1,
        pageSize: 10,
        id: '',
        orderNo: '',
        type: null
      },
      total: null,
      dialog: false,
      dialog1: false,
      row: {
        amount: ''
      },
      rules: {
        amount: [{ required: true, message: '请输入扣减/支付金额(元)', trigger: 'blur' }]
      },
      dialog2: false,
      form: {
        id: '',
        logisticsType: 1,
        logistics: ''
      }

    }
  },
  created() {
    goodsqueryAll({ pageSize: 999999 }).then(res => {
      goodsList = res.data.data
    })
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    delivery(row) {
      this.form.id = row.id
      this.form.logistics = ''
      this.dialog2 = true
    },
    submitLogistics() {
      setlogistics(this.form).then(() => {
        this.$message({
          message: '物流状态更新成功',
          type: 'success',
          showClose: true
        })
        this.dialog2 = false
        this.fetchData()
      })
    },
    findgoodName(id) {
      const name = goodsList.find(res => (res.id === id))?.name
      return name
    },
    del(id) {
      this.$confirm(`此操作将删除该订单, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del({ id: id }).then(res => {
          if (res.code * 1 === 200) {
            this.$message({
              message: `删除成功`,
              type: 'success',
              showClose: true
            })
            this.fetchData()
          }
        })
      }).catch(() => {
      })
    },
    pay(id) {
      this.$confirm(`此操作将删除该订单, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        createTradePay({ id: id }).then(res => {
          if (res.code * 1 === 200) {
            this.$message({
              message: res.message,
              type: 'success',
              showClose: true
            })
            this.fetchData()
          }
        })
      }).catch(() => {
      })
    },
    queryFreeze(row) {
      queryFreeze({ id: row.id }).then((res) => {
        this.$message({
          message: '订单状态更新成功',
          type: 'success',
          showClose: true
        })
        this.fetchData()
      })
    },
    unFree(row) {
      this.row.amount = ''
      this.row = row
      this.dialog = true
    },
    open(row) {
      this.row = row
      this.dialog1 = true
    },
    getDay(data) {
      const startDate = new Date(data).getTime()
      const endDate = new Date().getTime()
      const days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000)
      // alert(days);
      return Math.round(days)
    },
    submitFree() {
      const _this = this
      _this.$refs.form.validate((valid) => {
        if (valid) {
          createFunfreeze({ id: _this.row.id, amount: _this.row.amount }).then(res => {
            if (res.code * 1 === 200) {
              _this.$message({
                message: res.message,
                type: 'success',
                showClose: true
              })
              _this.dialog = false
              _this.fetchData()
            }
          })
        } else {
          return false
        }
      })
    },
    sizeData(e) {
      this.tableParam.page = 1
      this.tableParam.pageSize = e
      this.fetchData()
    },
    fetchData() {
      const _this = this
      _this.listLoading = true
      queryAll(this.tableParam).then(res => {
        console.log('xinxi', res.data.data)
        _this.list = res.data.data
        _this.total = res.data.total
        _this.listLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tooltip-content {
  max-width: 460px;
  line-height: 20px;
}
.dialog_info {
  padding-top: 20px;
}
</style>
